<template>
  <div :class="prefixCls">
    <div class="px-3.5 py-1">
      <a @click="handleClick">{{ text }}</a>
    </div>
    <DrawerInfo @register="registerInfo" />
  </div>
</template>

<script lang="ts" setup name="Function">
  import DrawerInfo from './DrawerInfo.vue';
  import { toJson } from '/@/utils';
  import { getRowKeys } from '../../hooks/functionSet';
  import { ComParams, FunctionComParams } from './function';
  import { useDrawer } from '/@/components/Drawer';

  import { useDesign } from '/@/hooks/web/useDesign';

  const props = defineProps<{
    text: string;
    record: Recordable;
    config: Recordable;
  }>();

  const { prefixCls } = useDesign('Function');
  const [registerInfo, { openDrawer: openInfo }] = useDrawer();

  const functionMap = {
    handleDrawer,
  };

  const handleClick = () => {
    const { functionName, params, _comParams = {} } = props.config;
    // return;
    const { primaryKey = '', complexParams, tableModelId, moduleId } = _comParams;

    const functionParams = toJson(params);
    handleFuncion(functionName, {
      modelId: tableModelId,
      moduleId,
      complexParams,
      functionParams,
      primaryKey: getRowKeys(primaryKey, props.record),
    });
  };

  function handleFuncion(functionName, params: ComParams) {
    const functionComParams: FunctionComParams = {
      params,
      record: props.record,
      tableFn: props.config._tableFn,
    };

    functionMap[functionName] && functionMap[functionName](functionComParams);
  }

  async function handleDrawer(params: FunctionComParams) {
    console.log(
      '%cparams===>55： ',
      'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
      params,
    );
    openInfo(true, params);
  }
</script>
<style lang="less" scoped></style>
